<template>
  <div>
    <div>
      <div class="comment">
        <div class="nav">
          <div class="floor">{{dataparent}}楼</div>
          <div class="user">
            <img :src="datas.user.head_img|filtersUrl" />
          </div>
          <div class="name">
            <div class="nametitle">{{datas.user.nickname}}</div>
            <div class="nametime" v-if="datas.create_date">
              {{datas.create_date.split('T')[0]}}
              &nbsp;&nbsp;
              {{datas.create_date.split('T')[1].split('.')[0]}}
            </div>
          </div>
          <div class="reply" @click="replys">回复</div>
        </div>
        <!-- <div class="content" v-if="replyS">
          回复:
          <span class="blue">{{datas.user.nickname}}</span>
          &nbsp;&nbsp;{{datas.content}}
        </div>-->
        <div class="content">{{datas.content}}</div>
      </div>
      <div v-if="show?datas.parent?true:false:false">
        <commentson
          v-if="datas.parent"
          :datas="datas.parent"
          :dataparent="dataparent-1"
          :show="show"
          @replys="replyss"
        />
      </div>
    </div>
  </div>
</template>

<script>
// import commentson from "../components/commentson";
export default {
  name: "commentson",
  props: ["datas", "dataparent", "show"],
  components: {
    commentson: () => import("../components/commentson")
  },
  data() {
    return {};
  },
  methods: {
    replys() {
      const nicknames = this.datas.user.nickname;
      const usernames = this.datas.user.username;
      // console.log(this.datas);
      this.$emit("replys", {
        id: this.datas.id,
        nickname: nicknames ? nicknames : usernames
      });
    },
    replyss(dataId) {
      this.$emit("replys", dataId);
    }
  }
};
</script>

<style lang="less" scoped>
// .blue {
//   color: blue;
// }
.comment {
  // width: 280px;
  font-size: 12px;
  margin: 0px 20px 0 20px;
  padding: 8px;
  color: #888;
  // border: 1px solid #ccc;
  background-color: #eee;
  .nav {
    margin: 10px 0px 0 10px;
    display: flex;
    .floor {
      text-align: center;
      font-size: 16px;
      padding: 5px 10px 0 0;
    }
    .user {
      width: 30px;
      height: 30px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
      }
    }
    .name {
      flex: 1;

      padding: 0 0 15px 10px;
      .nametitle {
        font-size: 16px;
        padding: 5px;
      }
      .nametime {
        font-size: 12px;
        color: #ccc;
      }
    }
    .reply {
      text-align: right;
      margin: 15px 20px 0 15px;
      font-size: 12px;
      color: #ccc;
    }
  }
  .content {
    margin: 0 0 10px 30px;
    font-size: 12px;
  }
}
</style>
